<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<title>世界杯</title>
	<link rel="stylesheet" type="text/css" href="resource/lib/css/normalize.css"/>
	<link rel="stylesheet" type="text/css" href="resource/index.css"/>
</head>
<body>
	<div class="logo"></div>
	<!--主页第一页-->
	<div class="index_bg">
		<div class="index_bottom"></div>
		<div class="index_top"></div>
		<div class="activity_introduce">
			<p class="introduce_white">上汽大通俱乐部球迷之夜，见证王者诞生</p>
			<p class="introduce_white">入场时间：2018.7.15 21:00-22:00</p>
			<p class="introduce_yellow">入场用户即享免费啤酒及小食</p>
			<p class="introduce_white">酒吧地址：Oscar's Pub 上海复兴中路1337号</p>
			<p class="introduce_yellow">莅临现场为冠军喝彩</p>
		</div>
		<div class="btn_start"></div>
		<p class="activity_rule">活动规则</p>
		<div class="box_rule">
			<div class="rule_bg">
				<div class="btn_closeRule"></div>
			</div>
		</div>
	</div>
	<!--第二页留资页-->
	<div class="index_bg2">
		<div class="index_bottom2"></div>
		<div class="infor_bg">
			<div class="box_name">
				<p class="name_txt">姓名：</p>
				<input type="text" id="name" />
			</div>
			<div class="box_phone">
				<p class="phone_txt">手机号：</p>
				<input type="text" id="phone" />
			</div>
			<div class="box_code">
				<input type="text" id="code" />
				<div class="btn_getCode">获取验证码</div>
			</div>
			<div class="box_area">
				<p class="area_txt">所在区域：</p>
				<select class="select_area">
					<option value ="">请选择</option>
					<option value ="">上海</option>
					<option value ="">杭州</option>
					<option value ="">南京</option>
					<option value ="">苏州</option>
				</select>
			</div>
			<div class="btn_ensure"></div>
		</div>
	</div>
	<!--第三页上传图片页-->
	<div class="index_bg3">
		<p class="index3_txt1">上传无遮挡的正面图片</p>
		<p class="index3_txt2">并选择支持的球队</p>
		<div class="icon_add">
			<form>
				<label for="file" id="view"></label>
				<input type="file" id="file" style="visibility: hidden;" accept="image/jpeg">
			</form>
			
		</div>
		<div id="alertBox">
			<div id="clipArea"></div>
			<div id="clipBtn">确定上传</div>
		</div>
		<div class="icon_selectTeam"></div>
		<ul class="box_team"> 
			<li>
				<div class="box_flag">
					<img src="resource/img/flag.jpg" >
				</div>
				<div class="team_name">德国队</div>
			</li>
			<li>
				<div class="box_flag">
					<img src="resource/img/flag.jpg" >
				</div>
				<div class="team_name">法国队</div>
			</li>
		</ul>
		<div class="btn_submit"></div>
	</div>
	<!--第四页海报页-->
	<div class="index_bg4">
		<div class="box_poster">
			<img class="poster" src="resource/img/index_bg2.jpg" >
			<div class="bg_call"></div>
			<div class="my_slogan">我是大通车主<span>奔驰</span>,<br />我为<span>法国队</span>加油</div>
			<img class="my_team" src="resource/img/flag.jpg" >
			<div class="entrance_code">入场券号：<br />128372</div>
			<img class="ewm" src="resource/img/ewm.jpg" >
		</div>
		
	</div>
	<img class="saveImg" src="" >
	<script src="resource/lib/js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="resource/lib/js/hammer.js" type="text/javascript" charset="utf-8"></script>
	<script src="resource/lib/js/iscroll-zoom.js" type="text/javascript" charset="utf-8"></script>
	<script src="resource/lib/js/lrz.all.bundle.js" type="text/javascript" charset="utf-8"></script>
	<script src="resource/lib/js/jquery.photoClip.js" type="text/javascript" charset="utf-8"></script>
	<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js" type="text/javascript" charset="utf-8"></script>
	<script src="resource/index.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var pic;
		var canvas2 = document.createElement("canvas");
		let _canvas = document.querySelector('.index_bg4');
		var w = parseInt(window.getComputedStyle(_canvas).width);
		var h = parseInt(window.getComputedStyle(_canvas).height);
		//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
		canvas2.width = w * 4;
		canvas2.height = h * 4;
		canvas2.style.width = w* 4 + "px";
		canvas2.style.height = h* 4 + "px";
		//可以按照自己的需求，对context的参数修改,translate指的是偏移量   
		var context = canvas2.getContext("2d");
		context.scale(4,4);
		 html2canvas(document.querySelector('.index_bg4'),{canvas:canvas2}).then(function(canvas) {            
				pic=canvas;
				console.log(pic.toDataURL());
				$(".saveImg").attr("src",pic.toDataURL()).hide()
				//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
				//document.querySelector(".down").setAttribute('href',canvas.toDataURL());
		 });
	</script>
</body>
</html>